<template>
    <div ref="chart" style="width: 100%; height:36%;margin-top:-2vh"></div>
</template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'YangZhiZhongLei',
    data() {
        return {
            myChart: null,
            option : {
                title: {
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    left: 'center',
                    top: 'bottom',
                    data: ['鱼', '虾', '蟹', '贝']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                        name: '养殖种类',
                        type: 'pie',
                       
                        radius: ['0%', '90%'],  // 调整内半径和外半径来调整大小
                        center: ['50%', '50%'],  // 确保图表在容器中居中
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 5
                        },
                        data: [
                            { value: 40, name: '鱼' },
                            { value: 33, name: '虾' },
                            { value: 28, name: '蟹' },
                            { value: 22, name: '贝' }
                        ],
                        color: ['#16B5FF', '#7685FF', '#FFC829', '#2FFFF3']  // 指定每个部分的颜色
                    }
                ]
            }
        };
    },
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        this.myChart = echarts.init(this.$refs.chart);
        this.myChart.setOption(this.option);
      }
    }
  };
  </script>
  
  <style scoped>
  /* 这里可以添加你的样式 */
  </style>
  